<template>
  <div>
    <orderHeaderVue title="我的一周" :dataShow="false" :hideShow="false" />
    <div class="main_layout">
      <div class="main_header">
        <div
          class="main_header_item"
          v-for="(item, index) in month"
          :key="index"
        >
          {{ WeekRange.target[index] }} {{ item }}
        </div>
      </div>
      <div class="main_content">
        <div
          class="main_content_item"
          v-for="(item, index) in listData"
          :key="index"
        >
          <draggable
            :list="listData[index]"
            ghost-class="ghost"
            chosen-class="chosenClass"
            animation="300"
            @start="onStart"
            @end="onEnd(listData[index])"
          >
            <template #item="{ element }">
              <div :class="element.State == 0 ? 'tips' : 'tips_complete'">
                <a-tooltip>
                  <template  #title>{{ element.Describe }}</template>
                  {{ element.Name }}
                </a-tooltip>
              </div>
            </template>
          </draggable>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import orderHeaderVue from "../components/orderHeader.vue";
import { queryweek, getYMD, queryday } from "../utils/tools";
import { defineComponent, onMounted, reactive } from "vue";
import { postJSON } from "../utils/request";
import draggable from "vuedraggable";
export default defineComponent({
  components: {
    orderHeaderVue,
    draggable,
  },
  setup() {
    const WeekRange = queryweek(new Date());
    const NowDate = getYMD(new Date(WeekRange.WeekStartDate));
    const month = ["周天","周一", "周二", "周三", "周四", "周五", "周六", ];

    const WeekData = reactive({
      arr: [],
    });
    const Rules = reactive({
      dateStatus: {},
    });

    for (let index = 1; index < 8; index++) {
      Rules.dateStatus[index] = (item) => {
        listData[index - 1].push(WeekData.arr[item]);
      };
    }


    const listData = reactive([[], [], [], [], [], [], []]);

    onMounted(() => {
      let params = {
        Target: NowDate
      };
      postJSON("/WeekInfo", params).then((res) => {
        WeekData.arr = res.data;

        for (let i = 0; i < WeekData.arr.length; i++) {
          const WeekIn = queryday(WeekData.arr[i].StartDate);
          Rules.dateStatus[WeekIn](i);
        }
      });
    });

    //拖拽开始的事件
    const onStart = () => {
      console.log("开始拖拽");
    };

    //拖拽结束的事件
    const onEnd = (e) => {
      console.log("结束拖拽", e);
    };

    return {
      month,
      WeekRange,
      listData,
      WeekData,
      onStart,
      onEnd,
    };
  },
});
</script>


<style lang='less' scoped>
.main_layout {
  height: calc(100vh - 100px);
  margin: 0 20px;
  .main_header {
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    /* 设置阴影 */
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    /* 设置card的背景色 */
    background: #ffffff;
    .main_header_item {
      width: 15%;
      border-right: 1px solid #ebebeb;
    }
  }
  .main_content {
    display: flex;
    flex-direction: row;
    height: calc(100% - 45px);
    /* 设置阴影 */
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    margin-top: 8px;
    .main_content_item {
      width: 15%;
      background: #ffffff;
      list-style: none;
      margin: 0;
      padding: 0;
      color: #ffffff;
      .tips {
        margin: 1%;
        padding: 0 2%;
        background-color: #1d85e0;
        overflow: hidden;
        white-space: nowrap;
        width: 98%;
        text-overflow: ellipsis;
        font-size: 12px;
      }
      .tips_complete {
        margin: 1%;
        padding: 0 2%;
        background-color: #94c5f0;
        overflow: hidden;
        white-space: nowrap;
        width: 98%;
        text-overflow: ellipsis;
        font-size: 12px;
      }
    }
  }
  .main_content .main_content_item:nth-child(2n) {
    background: #ebebeb;
  }
}
</style>